<!-- 列表 -->
<template>
  <div class="list">
    <!-- 列表数据 -->
    <div class="ulist">
      <!-- 列表数据 -->
      <div class="list_data">
        <table-list :tableData="tableData" :listHeader="listHeader" @operate="operate" :type="type"></table-list>
        <!-- 分页 -->
        <div class="paging">
          <paging-list @Listdata="getChilddptwo" :addNum="addNum"></paging-list>
        </div>
      </div>
    </div>

    <!-- 弹出详情 -->
    <el-dialog title="角色详情" :visible.sync="dialogTableVisible" @close="shut">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称">
          <el-input v-model="ruleForm.name" disabled></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="ment_list"
            default-expand-all
            :default-expanded-keys="show_list"
            :default-checked-keys="show_list"
            node-key="id"
            ref="tree"
            highlight-current
            :props="defaultProps"
            show-checkbox
          ></el-tree>
        </el-form-item>
      </el-form>
    </el-dialog>

    <!-- 弹出修改 -->
    <el-dialog title="修改角色" :visible.sync="dialogTableVisibles" @close="shut">
      <el-form :model="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="角色名称" prop="name">
          <el-input v-model="ruleForm.name" placeholder="请输入角色名称" @blur="ruleForm.name = publick.clearinput(ruleForm.name)"></el-input>
        </el-form-item>
        <el-form-item label="角色权限">
          <el-tree
            :data="ment_list"
            default-expand-all
            :default-expanded-keys="show_list"
            :default-checked-keys="show_list"
            node-key="id"
            ref="trees"
            highlight-current
            :props="defaultProps"
            show-checkbox
          ></el-tree>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确认修改</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import TableList from "../../components/List/TableList";
import PagingList from "../../components/List/PagingList";
export default {
  data() {
    return {
      placeholder: "请输入手机号", //input框中的placehould
      content: "", //input收入值
      value: "", //单时间日期
      Bnumber: 10, //每页条数
      Pnumber: 1, //当前页数
      addNum: 0, //总共多少条数
      selectname: "", //下拉列表内容
      tableData: [], //列表数据
      listHeader: [], //列表的渲染部分
      datas: {}, //列表操作返回的数据
      type: "rolelist", //列表类型
      Role_list: [], //可选择角色列表
      show_list: [], //展示列表
      ruleForm: {
        name: ""
      },
      dialogTableVisible: false, //点击展示详情
      dialogTableVisibles: false, //点击修改角色
      ment_list: [], //后台菜单列表
      defaultProps: {
        children: "child",
        label: "name"
      }
    };
  },
  components: {
    TableList,
    PagingList
  },
  //生命周期 - 创建完成（访问当前this实例）
  created() {
    this.userAdminList();
  },
  //生命周期 - 挂载完成（访问DOM元素）
  mounted() {
    this.menuAdminList();
    let header_name = ["角色名称", "角色权限"]; //列表头部
    let list_content = ["role_name", "rules"]; //列表渲染内容字段
    for (let i = 0; i < header_name.length; i++) {
      let obj = {
        label: header_name[i],
        prop: list_content[i]
      };
      this.listHeader.push(obj);
    }
  },
  methods: {
    //关闭弹出框时回调
    shut() {
      this.$refs.tree.setCheckedKeys([]);
      this.$refs.trees.setCheckedKeys([]);
    },
    //获取可选列表
    roleAdminOption() {
      //获取可选择角色列表
      this.$api
        .roleAdminOption({
          token: this.publick.token()
        })
        .then(res => {
          let data = res.data;
          for (let i in data) {
            console.log(i + ";" + data[i]);
            let pamas = {
              id: i,
              name: data[i]
            };
            this.Role_list.push(pamas);
          }
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取分页信息
    getChilddptwo(e) {
      this.Pnumber = e.Pnumber;
      this.Bnumber = e.Bnumber;
    },
    //获取详情
    particulars() {
      this.$api
        .roleAdminInfo({
          token: this.publick.token(),
          id: this.datas.id
        })
        .then(res => {
          let data = res.data;
          console.log(data);
          this.ruleForm.name = data.role_name;
          //获取该角色当前角色列表
          this.show_list = data.rules.split(",");
          console.log(this.show_list);
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取后台菜单列表
    menuAdminList() {
      this.$api
        .menuAdminList({
          token: this.publick.token()
        })
        .then(res => {
          console.log(res);
          this.ment_list = res.data;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //获取列表操作的数据
    operate(e) {
      this.datas = e;
      if (this.datas.type == "look") {
        //    跳转查看页面
        this.dialogTableVisible = true;
        this.particulars();
      } else if (this.datas.type == "delect") {
        // 删除
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            this.$api
              .roleAdminDel({
                token: this.publick.token(),
                id: this.datas.id
              })
              .then(res => {
                console.log(res);
                this.$message({
                  type: "success",
                  message: res.message
                });
                this.userAdminList();
              })
              .catch(res => {
                console.log(res);
              });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else if (this.datas.type == "amend") {
        // 修改
        this.dialogTableVisibles = true;
        this.particulars();
        this.roleAdminOption();
      }
    },
    userAdminList() {
      //获取角色列表
      this.$api
        .roleAdminList({
          token: this.publick.token(),
          page: this.Pnumber,
          limit: this.Bnumber
        })
        .then(res => {
          console.log(res);
          this.tableData = res.data.data;
          this.addNum = res.data.total;
        })
        .catch(res => {
          console.log(res);
        });
    },
    //提交修改
    submitForm() {
      this.$api
        .roleAdminSave({
          role_name: this.ruleForm.name,
          rules: this.$refs.trees.getCheckedKeys(),
          token: this.publick.token(),
          id: this.datas.id
        })
        .then(res => {
          this.$message({
            type: "success",
            message: res.message
          });
          this.userAdminList();
          this.dialogTableVisibles = false;
        })
        .catch(res => {
          console.log(res);
        });
    }
  },
  watch: {
    Bnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    },
    Pnumber(newval) {
      if (newval) {
        this.userAdminList();
      }
    }
  }
};
</script>
<style scoped>
/* @import url(); 引入css类 */
.list {
  width: 100%;
  height: 89vh;
  background: #fff;
  overflow: auto;
}
.ulist {
  background: #fff;
  width: 98%;
  margin: auto;
  margin-top: 2.5vh;
}
.screen {
  display: flex;
  height: 8vh;
  justify-content: flex-start;
  align-items: center;
}
.list_data {
  width: 98%;
  margin: auto;
  margin-top: 4vh;
}
.paging {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  margin-top: 4vh;
  padding-bottom: 2vh;
}
</style>